<template>
    <container-item-wrapper :widget="widget">
      <div class="timeline-container" :style="{paddingTop:'20px'}">
        <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
          <template v-for="(subWidget, swIdx) in widget.widgetList">
            <template v-if="'container' === subWidget.category">
              <component style="margin-bottom: 5px;" :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList" :index-of-parent-list="swIdx" :parent-widget="widget">
                <!-- 递归传递插槽！！！ -->
                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                  <slot :name="slot" v-bind="scope"/>
                </template>
              </component>
            </template>
            <template v-else>
              <component style="margin-bottom: 5px;" :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList" :index-of-parent-list="swIdx" :parent-widget="widget">
                <!-- 递归传递插槽！！！ -->
                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                  <slot :name="slot" v-bind="scope"/>
                </template>
              </component>
            </template>
          </template>
        </template>
        <el-timeline :reverse="widget.options.reverse">
            <el-timeline-item
              v-for="(item, index) in fieldModel"
              :key="index"
              :timestamp="item[widget.options.timeField]"
              :icon="item.icon"
              :hide-timestamp="item.hideTimestamp"
              :placement="item.placement"
              :type="item.type"
              :color="item.color"
              :size="item.size">
              {{item[widget.options.contentField]}}
            </el-timeline-item>
        </el-timeline>
      </div>
    </container-item-wrapper>
</template>
<script>

import {vformContainerItemMixin,vformRefMixin,vformEmitter} from '@/../lib/VFormDesigner.umd.min.js'
export default {
    name: "timeline1-item",
    componentName: 'ContainerItem',
    mixins: [vformEmitter, vformRefMixin, vformContainerItemMixin],
    props: {
      widget: Object,
    },
    inject: ['refList' , 'globalModel'],
    computed: {
        customClass() {
            return this.widget.options.customClass || ''
        },
    },
    created() {
      this.initRefList()

      this.handleOnCreated()
    },
    mounted() {
        let that = this;
        if(this.widget.options.selectType=='dataSource'){
            //是否初始化加载数据
            if(this.widget.options.initdata){
                this.loadData()
            }
        }else{
            this.fieldModel = this.widget.options.optionItems?JSON.parse(this.widget.options.optionItems):[]
        }
        this.$nextTick(() => {
            that.handleOnMounted()
        })
    },
    beforeDestroy() {
        this.unregisterFromRefList()
    },
    data() {
      return {
        fieldModel: [],
      }
    },
    methods: {
        handleOnCreated(){
            if (!!this.widget.options.onCreated) {
                let customFn = new Function('_this',this.widget.options.onCreated)
                customFn.call(this,this.getFormRef())
            }
        },
        handleOnMounted(){
            if (!!this.widget.options.onMounted) {
                let customFn = new Function('_this',this.widget.options.onMounted)
                customFn.call(this,this.getFormRef())
            }
        },
        //数据源
        loadData(param){
            if(this.designState){
                return false;
            }
            if(this.widget.options.selectType=='dataSource'){
                let that = this;
                let widget = this.widget;
                if(that.widget.options.requestUrl){
                    let requestUrl = widget.options.requestUrl;
                    let methodType = widget.options.methodType;
                    let headers = that.getHeaders();
                    let params = {};
                    //获取数据源配置的参数脚本
                    if(that.widget.options.requestScript){
                        let paramsFunc = new Function('_this','param',that.widget.options.requestScript);
                        let result = paramsFunc.call(this,that.getFormRef(),param);
                        if(result){
                            params = result;
                        }
                    }
                    //返回值事件脚本
                    let returnScript = widget.options.responseScript;
                    //调用方法
                    this.$vformRequest({
                        headers:headers,
                        url: requestUrl,
                        method: methodType,
                        params: params,
                        data: params
                    }).then(function (response) {
                        if(returnScript){
                            let returnFunc = new Function('_this','response',returnScript)
                            returnFunc.call(this,that.getFormRef(),response)
                        }
                        //解析data
                        let dataField = that.widget.options.dataField;
                        if(dataField){
                            let flag = true;
                            let res = response;
                            let re = /\./;
                            let dataFields = dataField.split(re);
                            for (let k = 0; k < dataFields.length; k++) {
                                if (!res[dataFields[k]]) {
                                    flag = false;
                                }else{
                                    res = res[dataFields[k]];
                                }
                            }
                            if(flag){
                                that.fieldModel = res;
                            }
                        }else{
                            that.fieldModel = response.data;
                        }
                    }).catch(function (error) {
                    that.$message.error("系统错误："+error)
                    });
                }else{
                that.$message.error('组件【' + widget.options.name + '】初始化数据源接口未配置')
                }
            }
        },
        setData(data){
            this.fieldModel = data;
        },
    }
}
</script>

<style lang="scss" scoped>
.timeline-container ::v-deep .el-timeline{
    padding-left: 5px;
}
</style>
